<template>
	<view class="content">
		<view class="search-box">
			<u-search placeholder="请输入课程名称~" v-model="keyword" :show-action='false' @search="search(keyword)"></u-search>
		</view>
		<!-- card-right-img -->
		<view class="card-right-img-wrap">
			<view class="card-right-img">
				<view class="card-item" v-for="(item,index) in searchList" :key="index"
					@click="toDetail(item._id,item.teacher_id)">
					<view class="card-left">
						<view class="top">
							<text>{{item.name}}</text>
						</view>
						<view class="bottom">
							<view class="left">
								<text>￥{{item.sale_price}}</text>
							</view>
							<view class="right">
								<text>{{item.total_sell_count}}人付费</text>
							</view>
						</view>
					</view>
					<view class="card-right">
						<image :src="item.main_pic" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				searchList:[]
			}
		},
		onLoad() {

		},
		methods: {
			search(keyword) {
				console.log(keyword)
				var that = this;
				that.searchList = [];
				const user_id = uni.getStorageSync('user_id');
				const db = uniCloud.database()
				db.collection('opendb-mall-goods')
					.field('name,sale_price,total_sell_count,main_pic,teacher_id')
					.get()
					.then(res => {
						console.log('so', res);
						if (res.result.data.length != 0) {
							res.result.data.forEach((item,index)=>{
								if(item.name.indexOf(keyword) != -1){
									that.searchList.push(item);
								}
							})
							// that.searchList = res.result.data;
							return
						}
					}).catch(err => {
						console.error(err)
					})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F4F5F9;
	}
	.content {}

	
	.search-box {
		background-color: #fff;
		padding: 20rpx;
	}

	//图片在右侧的 card-right-img
	.card-right-img-wrap {
		// background-color: #F4F5F9;
		padding: 15rpx;
	}

	.card-right-img {
		background-color: #fff;
		padding: 0 15rpx;

		.card-item {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;
			border-bottom: 1px solid #FAFAFA;

			.card-left {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 20rpx 0 10rpx 0;
				width: 370rpx;
				margin-right: 20rpx;

				.top {
					font-size: 32rpx;
					color: #434343;
					font-weight: bold;
				}

				.bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.left {
						color: #F56C6C;
						font-size: 28rpx;
						font-weight: bold;
					}

					.right {
						color: #B5B5B5;
						font-size: 24rpx;
					}
				}
			}

			.card-right {
				width: 300rpx;
				height: 160rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
